<div class="layui-row">
  <div class="layui-col-lg3">
    <div class="layui-btn-group" id="device_handle_permi">
    <button class="layui-btn data_handle_btn" id="add_device_permi">添加</button>
    <!-- <button class="layui-btn layui-btn-danger data-delete-btn">启/停</button> -->
</div>
  </div>
  <div class="layui-col-lg3">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" l name="search_key"  placeholder="设备ID/名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <a class="layui-btn" lay-submit="" lay-filter="data-search-btn">搜索</a>
            </div>
        </div>
    </form>
  </div>
</div>

<!-- 添加数据表单开始 -->
<form  class="layui-form layui-form-pane " action="" id="handle_data_form" lay-filter="handle_data_form" style="padding: 10px;display: none;">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">设备ID</label>
      <div class="layui-input-block">
        <input type="text" name="device_id" lay-verify="required" lay-reqtext="必填项!" placeholder="必填" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">授权码</label>
      <div class="layui-input-block">
        <input type="text" name="auth_id" lay-verify="required" lay-reqtext="必填项!" placeholder="必填" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <button class="layui-btn layui-btn-fluid" id="add_submit_btn" lay-submit lay-filter="add_submit" >提交</button>
</form>

<table class="layui-table" id="base_info_manage_table" lay-filter="base_info_manage_table"></table>
<script type="text/html" id="table_header">
  <p>设备管理表</p>
</script>

<!-- js代码开始 -->

<script type="text/javascript">


var ajax_url='normal_user_index';
// 设备数据表格渲染函数
var table_show=function(table_data){
  // device=table_data
  table.render({
    elem: '#base_info_manage_table',
    toolbar:'#table_header',
    data: table_data,
    id:'base_info_manage_table',
    cols: [[
        {type: "checkbox", fixed: "left"},
        {field: 'id',width:40, title: '序号',templet:function(d){
          return d.LAY_INDEX
        }},
        {field: 'user_name', title: '设备名称',sort:true},
        {field: 'device_id', title: '设备ID',sort:true},
        {field: 'model', title: '型号',sort:true},
        {field: 'iccid', title: 'sim卡号',sort:true},
        {field: 'status', title: '状态',sort:true},
        {field: 'user_detail', title: '附加信息',sort:true,templet:function(obj){
          var user_detail=obj.user_detail
          if(typeof(user_detail)!=='object'){
            user_detail=eval('('+user_detail+')')
          }
          var content='<p>'+user_detail.customize_title1+':'+user_detail.customize_value1+','+
                            user_detail.customize_title2+':'+user_detail.customize_value2+','+
                            user_detail.customize_title3+':'+user_detail.customize_value3+
                      '</p>'
          return content
        }},
        {field: 'remark', title: '备注'},
        {field: 'date_added', title: '创建时间',sort:true},
    ]],
    limits: [10, 15, 20, 25, 50, 100],
    limit: 10,
    page: true
  });
}

// 首次用户数据加载,index页面加载设备和型号信息
get_info_ajax(ajax_url,'get_device',table_show)

// 监听添加操作
$("#add_device_permi").on("click", function () {
    document.getElementById("handle_data_form").reset();
    form.render();
    layer.open({
        type: 1
        ,title:'添加设备'
        ,offset:'100px'  
        ,id: 'add_data' //防止重复弹出
        ,content:$('#handle_data_form')
        ,shade: 0 //不显示遮罩
      });
});

// 监听添加操作,并提交
form.on('submit(add_submit)',function(obj){
  if(obj.field.auth_id.length<4){
    layer.msg('授权码为4位')
    return false
  }
  console.log(obj.field)
  post_info_ajax(obj.field,ajax_url,'add_permi_dev',table_show)
  return false
})


// 监听设备搜索操作
form.on('submit(data-search-btn)', function (data) {

  var search_key = data.field['search_key'];
  if(search_key!==''){
    // 调用index页面搜索函数
    var search_result=search_func(device,search_key,'user_name','device_id')
    // 表格重载
    table_show(search_result)
  }else{
    table_show(device)
  }
  return false;
});

</script>